<template>
  <div id="deleteData">
    <el-dialog
      title="系统提示"
      :visible.sync="delDialogData.isShow"
      width="550px"
      :before-close="labelHandleClose"
    >
      <slot name="prompt"></slot>
      <div class="title">选择{{ delDialogData.type }}理由（必选）</div>
      <el-form ref="ruleForm" :model="ruleForm" label-width="80px" size="mini">
        <el-radio-group
          v-model="ruleForm.resource"
          size="medium"
          @change="choose"
        >
          <template v-for="(item, index) in resourceList">
            <el-radio :key="item.dictValue" :label="item.dictLabel"></el-radio>
            <el-input
              :key="index + item.dictValue"
              v-if="item.dictLabel === '其他'"
              v-model.trim="ruleForm.textarea"
              type="textarea"
              size="mini"
              :disabled="ruleForm.resource !== '其他'"
              :rows="2"
              :placeholder="`请输入${delDialogData.type}理由（必填）`"
              resize="none"
              show-word-limit
              :maxlength="showNameLength"
            >
            </el-input>
          </template>
        </el-radio-group>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="cancelLabel">取 消</el-button>
        <el-button type="success" :loading="loading" @click="confirmDel"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'DeleteData',
  msg: '活动帖子内容审核-删除',
  props: {
    delDialogData: {
      type: Object,
      default: function() {
        return {
          isShow: false, // 默认隐藏
          type: '不通过', // 类型
          from: '' //来自哪个页面。'showTag'-删除显性标签；其他为''
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        resource: '其他',
        textarea: ''
      },
      resourceList: [],
      showNameLength: 50
    }
  },
  async mounted() {
    let from = this.delDialogData.from
    let nameLength = this.delDialogData.nameLength
    if (nameLength) {
      //有（原因）字数限制;阅读审核页面-不通过/驳回，共用该组件
      this.showNameLength = nameLength
    }

    switch (from) {
      case 'showTag':
        //内容审核页面-删除显性标签
        this.resourceList = await sysNormalDisable('del_label_reason')
        break
      case 'read':
        //阅读内容审核-保存并驳回
        this.resourceList = await sysNormalDisable('read_verify_reason')
        break
      default:
        this.resourceList = await sysNormalDisable('delete_reason')
        break
    }
  },
  methods: {
    choose(value) {
      if (value !== '其他') {
        this.ruleForm.textarea = ''
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.delDialogData.type = ''
      this.delDialogData.id = ''
      this.delDialogData.nameLength = ''
      this.delDialogData.isShow = false
      this.delDialogData.from = ''
      this.ruleForm.textarea = ''
      this.ruleForm.resource = '其他'
    },
    confirmDel() {
      let resource = this.ruleForm.resource
      let textarea = this.ruleForm.textarea
      let subResean = ''
      if (resource !== '其他') {
        subResean = resource
      } else {
        subResean = textarea
      }
      /*有内容的时候，才提交，且关闭弹窗*/
      if (subResean) {
        this.$emit('reasonDel', subResean)
        this.cancelLabel()
      } else {
        this.$message.warning('理由不能为空！')
      }
    }
  }
}
</script>
<style lang="less">
#deleteData {
  .el-dialog__body {
    /*padding-top: 15px !important;*/
  }
  .prompt {
    font-size: 16px;
    color: #333;
    height: 20px;
    margin: -15px 0 20px;
  }
  .title {
    line-height: 16px;
    font-size: 16px;
    padding-bottom: 7px;
    color: #333;
    margin-top: -9px;
  }
  .el-form {
    margin-left: 20px;
  }
  .el-radio {
    display: block;
    margin-top: 12px;
  }
  .el-textarea {
    top: -15px;
    left: 65px;
    width: 380px;
  }
}
</style>
